<template>
  <div id="app">
    <el-form size="small" :inline="true" :model="formInline" class="demo-form-inline searchFrom">
      <el-form-item label="角色名称">
        <el-input v-model="formInline.roleName" placeholder="请输入角色名称"></el-input>
      </el-form-item>
      <el-form-item label="角色描述">
        <el-input v-model="formInline.roleDesc" placeholder="角色描述"></el-input>
      </el-form-item>
      <el-form-item label="角色类型">
        <el-select clearable v-model="formInline.roleType" placeholder="角色类型">
          <el-option label="系统管理员" value="1"></el-option>
          <el-option label="行政区管理员" value="2"></el-option>
          <el-option label="机构管理员" value="3"></el-option>
          <el-option label="业务操作员" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button type="primary" @click="onAddUser">添加角色</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
      <el-table-column prop="roleType | userType" label="角色类型">
        <template slot-scope="scope">
          <span>{{ scope.row.roleType | userType}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <i class="el-icon-edit" @click="tableEdit(scope.$index, scope.row)" title="角色编辑"></i>
          <i class="el-icon-setting" @click="settingDialog(scope.$index, scope.row)" title="角色授权"></i>
          <ep-delete
            :id="scope.row.id"
            url="/sys/role/deleteSysRole"
            parmeId="roleId"
            :init="true"
            @init="initTable"
          >
            <i class="el-icon-delete" title="删除"></i>
          </ep-delete>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog center title="角色授权" :visible.sync="dialogTableVisible" class="authorizeDialog">
      <el-row>
        <el-col :span="12">
          <p class="dialogText">经办事项权限</p>
          <el-tabs
            style="width:200px"
            :stretch="true"
            v-model="activeName"
            type="card"
            @tab-click="handleClick"
          >
            <el-tab-pane label="社保" name="socialInsurance"></el-tab-pane>
            <el-tab-pane label="医保" name="healthInsurance"></el-tab-pane>
          </el-tabs>
          <span>系统名称</span>
          <el-checkbox v-model="systemName">社会保险经办系统</el-checkbox>
          <el-tree
            :data="treeData"
            show-checkbox
            ref="treeIns"
            node-key="id"
            :default-checked-keys="defaultTreeData"
            :props="{
                key: 'id',
                label: 'label'
              }"
            :default-expand-all="true"
          ></el-tree>
        </el-col>
        <el-col :span="12">
          <p class="dialogTextRight">系统管理权限</p>
          <el-tree
            :data="sysData"
            ref="sysTree"
            show-checkbox
            node-key="id"
            :default-checked-keys="defaultSysData"
            :expand-on-click-node="false"
            :props="{
                key: 'id',
                label: 'title'
              }"
            :default-expand-all="true"
            @check-change="sysChange"
          ></el-tree>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="settingEditSave">确 定</el-button>
      </div>
    </el-dialog>
    <div class="pageblock">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="roleTotal"
      ></el-pagination>
    </div>
    <el-dialog
      center
      :title="roleTitle"
      :visible.sync="dialogFormVisible"
      width="50%"
      class="createDialog"
    >
      <el-form :model="roleForm" :rules="dialogRules" label-width="100px" ref="ruleForm">
        <el-row>
          <el-col :span="11" :offset="4">
            <el-form-item label="角色名称" prop="roleName">
              <el-input v-model="roleForm.roleName" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11" :offset="4">
            <el-form-item label="角色描述">
              <el-input v-model="roleForm.roleDesc" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11" :offset="4">
            <el-form-item label="角色类型">
              <!-- <el-input v-model="roleForm.roleType" autocomplete="off"></el-input> -->
              <el-select :disabled="roleTypeSelect" v-model="roleForm.roleType" placeholder="角色类型">
                <el-option disabled label="系统管理员" value="1"></el-option>
                <el-option label="行政区管理员" value="2"></el-option>
                <el-option label="机构管理员" value="3"></el-option>
                <el-option label="业务操作员" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="roleEditSave('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      formInline: {
        roleName: "",
        roleDesc: "",
        roleType: ""
      },

      roleTitle: "创建角色",
      tableData: [],
      defaultSysData: [],
      defaultTreeData: [],
      treeData: [],
      sysData: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      props: {
        label: "name",
        children: "zones"
      },
      roleForm: {
        roleName: "",
        roleDesc: "",
        roleType: ""
      },
      currentSysList: [],
      roleTotal: 1,
      dialogRules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { max: 20, message: "最多20个字符", trigger: "blur" }
        ]
      },
      dialogFormVisible: false,
      count: 1,
      activeName: "2",
      currentPage: 1,
      dialogTableVisible: false,
      systemName: true,
      page: 1,
      size: 10,
      treeId: "",
      editId: ""
    };
  },
  created() {
    this.initTable();
    this.$get("/system/wfSystemList", {
      type: 2,
      pageNum: 1,
      pageSize: 1000
    }).then(data => {});
  },
  computed: {
    roleTypeSelect() {
      return this.roleForm.roleType == "1" ? true : false;
    }
  },
  methods: {
    initTable() {
      this.$get("/sys/role/queryTable", {
        page: this.page,
        size: this.size,
        ...this.formInline
      }).then(data => {
        if (data.data.pageList.success) {
          this.tableData = data.data.pageList.result;
          this.roleTotal = Number(data.data.count);
        }
      });
    },
    onSearch() {
      this.initTable();
    },
    sysChange(a, b, c) {
      this.currentSysList = [];
      for (let item of this.$refs.sysTree.getCheckedKeys()) {
        this.currentSysList.push({ functionId: item });
      }
    },
    settingEditSave() {
      let userTaskArr = this.$refs.treeIns.getCheckedKeys();
      let userTaskArrId = [];
      for (let i = 0, len = userTaskArr.length; i < len; i++) {
        if (userTaskArr[i] == null) {
          userTaskArr.splice(i, 1);
          len--;
        }
      }
      for (let item of userTaskArr) {
        userTaskArrId.push({ id: item });
      }
      this.$post("/userTask/saveRoleTask", {
        addRoleTaskDetailVOList: userTaskArrId,
        roleId: this.treeId
      }).then(data => {
        this.$mess(data);
      });
      let aa = this.$refs.sysTree.getCheckedKeys();
      let bb = [];
      for (let item of aa) {
        bb.push({ functionId: item });
      }
      // if (this.currentSysList.length) {
      //   aa = this.currentSysList;
      // } else {
      //   for (let item of this.defaultSysData) {
      //     aa.push({ functionId: item });
      //   }
      // }

      this.$post("/sys/role/addRoleRef", {
        roleId: this.treeId,
        treeInfo: bb
      }).then(data => {
        if (data.success) {
          this.initTable();
          this.dialogTableVisible = false;
          this.$message({
            type: "success",
            message: data.resultDes
          });
        }
      });
    },
    roleEditSave(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.roleTitle == "修改角色") {
            this.$post("/sys/role/updateRole", {
              roleName: this.roleForm.roleName,
              roleDesc: this.roleForm.roleDesc,
              roleType: this.roleForm.roleType,
              id: this.editId
            }).then(data => {
              this.$mess(data);
              this.dialogFormVisible = false;
              this.initTable();
              // this.reload()
            });
            return;
          } else {
            this.$post("/sys/role/addSysRole", this.roleForm).then(data => {
              this.$mess(data);

              this.dialogFormVisible = false;
              this.initTable();
            });
          }
        } else {
          return false;
        }
      });
    },
    onAddUser() {
      this.roleForm = {
        roleName: "",
        roleDesc: "",
        roleType: ""
      };
      this.dialogFormVisible = true;
      this.roleTitle = "创建角色";
    },
    handleSizeChange(val) {
      this.size = val;
      this.initTable();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.initTable();
    },
    handleClick(val) {
      this.$get("/system/wfSystemList", {
        type: this.activeName,
        pageNum: 1,
        pageSize: 1000
      }).then(data => {});
    },
    settingDialog(index, row) {
      this.defaultSysData = [];
      this.treeId = row.id;
      this.dialogTableVisible = true;
      this.$post("/menu/taskTree", {
        roleId: row.id
      }).then(data => {
        this.treeData = data.result.treeVOS;
        this.defaultTreeData = data.result.choosedIdList;
      });
      this.$get("/sys/role/queryTree", {
        roleType: row.roleType,
        roleId: row.id
      }).then(data => {
        this.sysData = data.data.result.result;
        for (let item of data.data.rfList) {
          this.defaultSysData.push(item.functionId);
        }
      });
    },
    tableEdit(index, row) {
      this.roleTitle = "修改角色";
      this.editId = row.id;
      this.dialogFormVisible = true;
      var obj = Object.assign({}, row);
      this.roleForm = obj;
    }
  }
};
</script>

<style scoped lang="css">
.authorizeDialog /deep/ [class*=" el-icon-"],
[class^="el-icon-"] {
  color: #5fb9ee;
  font-size: 20px;
  cursor: pointer;
}
.authorizeDialog /deep/ .el-dialog__header {
  border-bottom: 1px solid #ccc;
}
.authorizeDialog /deep/ .el-dialog {
  border-radius: 14px;
  width: 80%;
  min-height: 70%;
}

.createDialog /deep/ [class*=" el-icon-"],
[class^="el-icon-"] {
  color: #5fb9ee;
  font-size: 20px;
  cursor: pointer;
}
.createDialog /deep/ .el-dialog__header {
  border-bottom: 1px solid #ccc;
  margin-bottom: 50px;
}
.createDialog /deep/ .el-dialog {
  border-radius: 14px;
  /* width: 80%; */
  /* padding: 20px 100px; */
}

.pageblock {
  width: 100%;
  text-align: center;
  margin-top: 30px;
}
.dialogText {
  margin-bottom: 20px;
}
.dialogTextRight {
  margin-bottom: 80px;
}
.searchFrom {
  display: flex;
  justify-content: space-around;
}
</style>
